<script setup>
import {ref} from "vue";

const props = defineProps(['flag', 'activeIcon', 'inactiveIcon', 'count'])

const isAnimating = ref(false);
const emit = defineEmits(['onActive', 'OnInactive']);

const handleClick = () => {
  isAnimating.value = true;
  setTimeout(() => {
    isAnimating.value = false;
    if (props.flag) {
      emit('OnInactive');
    } else {
      emit('onActive');
    }
  }, 300);
};
</script>

<template>
  <div class="inline-block">
    <div class="flex items-center">
      <img  alt="Icon" width="18" height="18"
            :src="props.flag? props.activeIcon : props.inactiveIcon"
            @click="handleClick"
            :class="{'scale-120': isAnimating}"/>
      <span v-if="props.count != null" class="ml-2 select-none text-sm">{{ props.count }}</span>
    </div>
  </div>
</template>

<style scoped>
img {
  transition: transform 0.3s ease-in-out;
}

img:hover {
  transform: scale(1.1);
}

img:active {
  transform: scale(0.80);
}

img.scale-120 {
  transform: scale(1.2);
}

span {
  transition: all 0.3s ease-in-out;
}
</style>